<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<view class="carousel-container">
			<swiper class="carousel" :autoplay="true" :loop="true" :current="currentSwiper" @change="swiperChange">
				<swiper-item v-for="(imgUrl, index) in item.imgUrls" :key="index">
					<image :src="imgUrl" mode="aspectFill" class="carousel-image"/>
				</swiper-item>
			</swiper>
			<!-- <view class="carousel-indicator" v-if="item.imgUrls">
				{{ currentSwiper + 1 }}/{{ item.imgUrls.length }}
			</view> -->
		</view>
		
		<!-- 基本信息区域 -->
		<view class="info-card">
			<text class="spot-name">{{ item.spotName }}</text>
			<view class="price-section">
				<view class="price-tag">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ item.adultFee }}</text>
					<text class="price-unit">/人</text>
				</view>
				<button class="booking-btn" @click="checkLoginAndNavigate">立即预订</button>
			</view>
			<view class="notice">
				<text class="notice-icon">地址：️</text>
				<text class="notice-text">{{item.spotAddress}}</text>
			</view>
		</view>
		
		<!-- 导航选项卡 -->
		<view class="tab-bar">
			<text 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{'active': activeTab === index}"
				@click="switchTab(index)"
			>
				{{ tab }}
				<view class="tab-indicator" v-if="activeTab === index"></view>
			</text>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-container">
			<introduce v-if="activeTab === 0" :item1="item" class="content-section"/>
			<arrange v-if="activeTab === 1" :item1="item" class="content-section"/>
			<price v-if="activeTab === 2" :item1="item" class="content-section"/>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'pinia'
	import { useUserInfoStore } from '../../../stores/userInfo.js';
	import { ref } from 'vue'
	import arrange from './arrange.vue'
	import introduce from "./introduce.vue"
	import price from "./price.vue"
	import { http } from '../../../utils/http.js'
	
	export default {
		onLoad(query) {
			const id = query.id;
			this.fetchData(id);
		},
		components: {
			arrange,
			introduce,
			price
		},
		data() {
			return {
				item: {},
				tabs: ['景点介绍', '行程安排', '费用说明'],
				activeTab: 0,
				currentSwiper: 0
			}
		},
		computed: {
		    ...mapState(useUserInfoStore, ['userId', 'state', 'username']),
		},
		methods: {
			fetchData(id) {
				uni.request({
					url: `/api/common/listScenicById/${id}`, 
					method: 'GET',
					success: (res) => {
						if (res.data?.data?.[0]) {
							this.item = res.data.data[0];
							this.item.imgUrls = this.item.imgUrl?.split(' ') || [];
						}
					},
					fail: (err) => {
						console.error('请求数据失败', err);
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					}
				});
			},
			switchTab(index) {
				this.activeTab = index;
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			checkLoginAndNavigate() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/user/fillInfo/fillInfo'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录后再报名',
						confirmText: '去登录',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '/common/pages/my/my'
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 轮播图样式 */
	.carousel-container {
		position: relative;
		height: 500rpx;
	}
	
	.carousel {
		height: 100%;
	}
	
	.carousel-image {
		width: 100%;
		height: 100%;
	}
	
	.carousel-indicator {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	/* 信息卡片样式 */
	.info-card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.spot-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.price-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.price-tag {
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.price-symbol {
		font-size: 28rpx;
	}
	
	.price-value {
		font-size: 40rpx;
	}
	
	.price-unit {
		font-size: 24rpx;
		color: #999;
		font-weight: normal;
	}
	
	.booking-btn {
		background: linear-gradient(90deg, #1e90ff, #70b1ff);
		color: white;
		border-radius: 50rpx;
		padding: 0 80rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 8rpx rgba(30, 144, 255, 0.2);
		border: none;
		margin-right: 20rpx; 
	}
	
	.notice {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 24rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.notice-icon {
		margin-right: 10rpx;
	}
	
	/* 选项卡样式 */
	.tab-bar {
		display: flex;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 25rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}
	
	.tab-item.active {
		color: #1e90ff;
		font-weight: bold;
	}
	
	.tab-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background-color: #1e90ff;
		border-radius: 3rpx;
	}
	
	/* 内容区域样式 */
	    .content-container {
	        background-color: #fff;
	        border-radius: 20rpx;
	        margin: 20rpx;
	        padding: 30rpx;
	        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	        min-height: 200rpx; /* 确保有最小高度 */
	    }
	    
	    .content-section {
	        line-height: 1.5;
	    }
</style>